<template>
  <div :id="playerId" class="prism-player" :style="playStyle" />
</template>

<script>
export default {
  name: 'Aliplayer',

  /** 播放器部分配置，所有配置请移步 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.2.25.5c161c4cwH7GcQ**/
  props: {
    playStyle: {
      type: String,
      default: 'width:200px;height:200px;'
    },
    /** 阿里播放SDK**/
    aliplayerSdkPath: {
      type: String,
      default: 'https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js'
    },
    /** 播放器是否自动播放，在移动端autoplay属性会失效。Safari11不会自动开启自动播放如何开启。**/
    autoplay: {
      type: Boolean,
      default: true
    },
    /** 播放内容是否为直播，直播时会禁止用户拖动进度条。**/
    isLive: {
      type: Boolean,
      default: true
    },
    /** 播放器宽度，可形如‘100%’或者‘100px’
             chrome浏览器下flash播放器分别不能小于397x297。**/
    width: {
      type: String,
      default: '100%'
    },
    /** 播放器高度，可形如‘100%’或者‘100px’
             chrome浏览器下flash播放器分别不能小于397x297。**/
    height: {
      type: String,
      default: '100%'
    },
    /** 播放器控制按钮显示方式**/
    controlBarVisibility: {
      type: String,
      default: 'hover'
    },
    /** 采用H5播放控件**/
    useH5Prism: {
      type: Boolean,
      default: true
    },
    /** 采用Flash播放控件**/
    useFlashPrism: {
      type: Boolean,
      default: false
    },
    /** 媒体转码服务的媒体Id**/
    vid: {
      type: String,
      default: ''
    },
    /** 播放权证 详情请看 https://help.aliyun.com/document_detail/52833.html?spm=a2c4g.11186623.2.16.201bbf80RzoAEi**/
    playauth: {
      type: String,
      default: ''
    },
    /** 视频播放地址url：
             - 单独url。
             - 默认状态，表示使用vid+playauth。
             - source播放方式优先级最高。
             source支持多清晰度设置：
             source:’{“HD”:”address1”,”SD”:”address2”}’，详情参见 https://help.aliyun.com/document_detail/125574.html?spm=a2c4g.11186623.2.15.201bbf80RzoAEi#h2-u591Au6E05u6670u5EA6u64ADu653E7。**/
    source: {
      type: String,
      default: ''
    },
    /** 播放器默认封面图片，请填写正确的图片url地址。
             需要autoplay为’false’时，才生效。
             Flash播放器封面也需要开启允许跨域访问。**/
    cover: {
      type: String,
      default: ''
    },
    /** 声明视频播在界面上的位置，默认为“center”。可选值为：“top”，“center”
             详情参见 https://help.aliyun.com/document_detail/62953.html?spm=a2c4g.11186623.2.23.201bbf80RzoAEi。**/
    x5VideoPosition: {
      type: String,
      default: 'top'
    },
    /** 声明启用同层H5播放器，启用时设置的值为‘h5’
             详情参见 https://help.aliyun.com/document_detail/62953.html?spm=a2c4g.11186623.2.23.201bbf80RzoAEi。**/
    x5Type: {
      type: String,
      default: 'h5'
    },
    /** 声明视频播放时是否进入到TBS的全屏模式，默认为false。当需要把视频做为背景时，设置为true
             详情参见 https://help.aliyun.com/document_detail/62953.html?spm=a2c4g.11186623.2.23.201bbf80RzoAEi。**/
    x5Fullscreen: {
      type: Boolean,
      default: false
    },
    /** 声明TBS播放器支持的方向，可选值：landscape：横屏 portraint：竖屏
             详情参见 https://help.aliyun.com/document_detail/62953.html?spm=a2c4g.11186623.2.23.201bbf80RzoAEi。**/
    x5Orientation: {
      type: Number,
      default: 2
    },
    /** 延迟播放时间，单位为秒。
             详情参见 https://help.aliyun.com/document_detail/63198.html?spm=a2c4g.11186623.2.25.201bbf80RzoAEi**/
    autoPlayDelay: {
      type: Number,
      default: 0
    },
    /** 延迟播放提示文本。
             详情参见 https://help.aliyun.com/document_detail/63198.html?spm=a2c4g.11186623.2.25.201bbf80RzoAEi**/
    autoPlayDelayDisplayText: {
      type: String,
      default: ''
    },
    /** 显示播放时缓冲图标，默认true。**/
    showBuffer: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      playerId: 'aliplayer_' + Math.random() * 100000000000000000,
      scriptTagStatus: 0,
      instance: null
    }
  },
  created() {
    if (window.Aliplayer !== undefined) {
      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
      this.scriptTagStatus = 2
      this.initAliplayer()
    } else {
      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
	  console.log('不存在')
      this.insertScriptTag()
    }
  },
  mounted() {
	  console.log('执行')
    if (window.Aliplayer !== undefined) {
      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
      this.scriptTagStatus = 2
      this.initAliplayer()
	  console.log('加载成功')
    } else {
      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
      this.insertScriptTag()
	  console.log('加载失败')
    }
  },
  methods: {
    insertScriptTag() {
      const _this = this
      let playerScriptTag = document.getElementById('playerScriptTag')
      // 如果这个tag不存在，则生成相关代码tag以加载代码
      if (playerScriptTag === null) {
        playerScriptTag = document.createElement('script')
        playerScriptTag.type = 'text/javascript'
        playerScriptTag.src = this.aliplayerSdkPath
        playerScriptTag.id = 'playerScriptTag'
        const s = document.getElementsByTagName('head')[0]
        s.appendChild(playerScriptTag)
      }
      if (playerScriptTag.loaded) {
        _this.scriptTagStatus++
      } else {
        playerScriptTag.addEventListener('load', () => {
          _this.scriptTagStatus++
          playerScriptTag.loaded = true
          _this.initAliplayer()
        })
      }
      _this.initAliplayer()
    },
    initAliplayer() {
      const _this = this
      // scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
      if (_this.scriptTagStatus === 2 && _this.instance === null) {
        // Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
        // 所以，我们只能在 nextTick 里面初始化 Aliplayer
        _this.$nextTick(() => {
          _this.instance = window.Aliplayer({
            id: _this.playerId,
            autoplay: _this.autoplay,
            isLive: _this.isLive,
            playsinline: _this.playsinline,
            format: _this.format,
            width: _this.width,
            height: _this.height,
            controlBarVisibility: _this.controlBarVisibility,
            useH5Prism: _this.useH5Prism,
            vid: _this.vid,
            playauth: _this.playauth,
            source: _this.source,
            cover: _this.cover,
            x5_video_position: _this.x5_video_position,
            x5_type: _this.x5_type,
            x5_fullscreen: _this.x5_fullscreen,
            x5_orientation: _this.x5_orientation,
            autoPlayDelay: _this.autoPlayDelay,
            autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText,
            showBuffer: _this.showBuffer
          })
          // 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
          _this.instance.on('ready', () => {
            this.$emit('ready', _this.instance)
          })
          _this.instance.on('play', () => {
            this.$emit('play', _this.instance)
          })
          _this.instance.on('pause', () => {
            this.$emit('pause', _this.instance)
          })
          _this.instance.on('ended', () => {
            this.$emit('ended', _this.instance)
          })
          _this.instance.on('liveStreamStop', () => {
            this.$emit('liveStreamStop', _this.instance)
          })
          _this.instance.on('m3u8Retry', () => {
            this.$emit('m3u8Retry', _this.instance)
          })
          _this.instance.on('hideBar', () => {
            this.$emit('hideBar', _this.instance)
          })
          _this.instance.on('waiting', () => {
            this.$emit('waiting', _this.instance)
          })
          _this.instance.on('snapshoted', () => {
            this.$emit('snapshoted', _this.instance)
          })
        })
      }
    },
    /**
     * 播放视频
     */
    play: function() {
      this.instance.play()
    },
    /**
     * 暂停视频
     */
    pause: function() {
      this.instance.pause()
    },
    /**
     * 重播视频
     */
    replay: function() {
      this.instance.replay()
    },
    /**
     * 跳转到某个时刻进行播放
     * @argument time 的单位为秒
     */
    seek: function(time) {
      this.instance.seek(time)
    },
    /**
     * 获取当前时间 单位秒
     */
    getCurrentTime: function() {
      return this.instance.getCurrentTime()
    },
    /**
     *获取视频总时长，返回的单位为秒
     * @returns 返回的单位为秒
     */
    getDuration: function() {
      return this.instance.getDuration()
    },
    /**
             获取当前的音量，返回值为0-1的实数ios和部分android会失效
             */
    getVolume: function() {
      return this.instance.getVolume()
    },
    /**
             设置音量，vol为0-1的实数，ios和部分android会失效
             */
    setVolume: function(vol) {
      this.instance.setVolume(vol)
    },
    /**
     *直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换
     *@argument url 视频地址
     *@argument time 跳转到多少秒
     */
    loadByUrl: function(url, time) {
      this.instance.loadByUrl(url, time)
    },
    /**
     * 设置播放速度
     *@argument speed 速度
     */
    setSpeed: function(speed) {
      this.instance.setSpeed(speed)
    },
    /**
     * 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
     *@argument w 播放器宽度
     *@argument h 播放器高度
     */
    setPlayerSize: function(w, h) {
      this.instance.setPlayerSize(w, h)
    },
    /**
     * 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换
     *@argument vid 视频id
     *@argument playauth 播放凭证
     */
    reloaduserPlayInfoAndVidRequestMts: function(vid, playauth) {
      this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth)
    }
  }
}
</script>

<style>
/* @import '//g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css' */
</style>
